<template>
  <view class="containner">
    <u-navbar :title="title" title-size="36" height="50" title-width="400"> </u-navbar>
    <view class="" width style="width: 100%; margin: 20rpx 0rpx 20rpx 0">
      <u-cell-group class="">
        <u-cell-item :arrow="false">
          <u-steps
            :list="numList"
            active-color="#10A28F"
            mode="number"
            :current="applyStep"
          ></u-steps>
          <view class="steps-tip">
            <!-- <text> {{step1Desc}}  </text> -->
            <text> 个人信息 </text>
            <text> 1-3工作日</text>
            <!-- <text>{{step3Desc}}</text> -->
            <text>享有权益</text>
          </view>
        </u-cell-item>
      </u-cell-group>
    </view>
    <view class="" v-if="applyStep == 0 || applyStep == 2">
      <p v-if="applyStep == 2" class="warning">{{ form.auditReason }}</p>
      <view class="from">
        <view>
          <u-cell-group class="upload_the_module">
            <view style="padding: 30rpx; font-size: 26rpx; color: #999999">申请资料信息</view>
            <u-line></u-line>
            <view v-if="type == 1">
              <u-cell-item :arrow="false">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>店铺名称</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    style=""
                    v-model="form.name"
                    placeholder="请输入店铺名称"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>
              <u-cell-item @click="onPicker(1)">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>经营类型</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    v-model="form.categoryName"
                    disabled
                    placeholder="请选择商户分类名称"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>
              <u-cell-item @click="onPicker(5)">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>经营地址</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    v-model="area"
                    disabled
                    placeholder="请选择地区"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>
              <u-cell-item :arrow="false">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>详细地址</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    v-model="form.detailAddress"
                    placeholder="例如街道、门牌号"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>
            </view>
            <view v-else>
              <u-cell-item :arrow="false">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>姓名</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    v-model="form.contactName"
                    placeholder="请输入姓名"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>

              <u-cell-item :arrow="false">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>身份证号</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    v-model="form.ownerEidNo"
                    placeholder="请输入真实有效的证件号码"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>
              <u-cell-item @click="onPicker(5)">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>所在城市</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    v-model="area"
                    disabled
                    placeholder="请选择所在城市"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>
              <u-cell-item :arrow="false">
                <view class="title" slot="title">
                  <text style="color: red">*</text>
                  <text>详细地址</text>
                </view>
                <view style="width: 400rpx; text-align: left">
                  <input
                    v-model="form.detailAddress"
                    placeholder="例如街道、门牌号"
                    :clearable="false"
                    :inputBorder="false"
                  />
                </view>
              </u-cell-item>
            </view>
          </u-cell-group>
        </view>
        <view class="work_title_module" v-if="type == 2">
          <u-cell-group>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>联系电话</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.contactMobile"
                  placeholder="请输入联系电话"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>验证码</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.ownerEidNo"
                  placeholder="请输入验证码"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
              <view slot="right-icon" @click="handelSmsCaptcha()">
                <text v-if="!smsState" class="activate">获取验证码</text>
                <text v-else class="un-activate">重新发送({{ times }})秒</text>
              </view>
            </u-cell-item>
          </u-cell-group>
        </view>
        <view class="work_title_module" v-if="type == 1">
          <u-cell-group>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>姓名</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.contactName"
                  placeholder="请输入姓名"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>联系电话</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.contactMobile"
                  placeholder="请输入联系电话"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>验证码</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.ownerEidNo"
                  placeholder="请输入验证码"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
              <view slot="right-icon" @click="handelSmsCaptcha()">
                <text v-if="!smsState" class="activate">获取验证码</text>
                <text v-else class="un-activate">重新发送({{ times }})秒</text>
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false">
              <view class="title" slot="title">
                <text style="color: red">*</text>
                <text>身份证号</text>
              </view>
              <view style="width: 400rpx; text-align: left">
                <input
                  v-model="form.ownerEidNo"
                  placeholder="请输入真实有效的证件号码"
                  :clearable="false"
                  :inputBorder="false"
                />
              </view>
            </u-cell-item>
          </u-cell-group>
        </view>
        <view class="work_title_module card">
          <view class="title" style="width: 100%">
            <text style="color: red">*</text>
            <text>上传身份证照片</text>
          </view>
          <view class="upload-group dis-flex flex-y-between">
            <u-upload
              width="330rpx"
              height="220rpx"
              :custom-btn="true"
              max-count="1"
              :action="action"
              ref="uUpload1"
              :file-list="fileList1"
            >
              <view
                slot="addBtn"
                :style="{ backgroundImage: `url(${getImageUrl('card-f.png')})` }"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <!-- <u-image src="@/static/card-f.png" width="330rpx" height="240rpx"></u-image> -->
                <view class="des">
                  <u-icon name="/static/g-xj.png" size="80"></u-icon>
                  <view class="des-text">人像面</view>
                </view>
              </view>
            </u-upload>
            <u-upload
              width="330rpx"
              height="220rpx"
              :custom-btn="true"
              max-count="1"
              :action="action"
              ref="uUpload2"
              :file-list="fileList2"
            >
              <view
                slot="addBtn"
                :style="{ backgroundImage: `url(${getImageUrl('card-b.png')})` }"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <!-- <u-image src="@/static/card-b.png" width="330rpx" height="240rpx"></u-image> -->
                <view class="des">
                  <u-icon name="/static/g-xj.png" size="80"></u-icon>
                  <view class="des-text">国徽面</view>
                </view>
              </view>
            </u-upload>
          </view>
        </view>
        <view class="work_title_module card" v-if="type == 1">
          <view class="title" style="width: 100%">
            <text style="color: red">*</text>
            <text>营业执照</text>
          </view>
          <view class="upload-group dis-flex flex-y-between">
            <u-upload
              width="330rpx"
              height="220rpx"
              :custom-btn="true"
              max-count="1"
              :action="action"
              ref="uUpload3"
              :file-list="fileList3"
            >
              <view
                slot="addBtn"
                :style="{ backgroundImage: `url(${getImageUrl('yyzz-bg.png')})` }"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <view class="des">
                  <u-icon name="/static/g-xj.png" size="80"></u-icon>
                  <view class="des-text">营业执照</view>
                </view>
              </view>
            </u-upload>
          </view>
        </view>

        <view class="footer-fill"></view>
        <u-gap height="200" bg-color="#F0F1F2"></u-gap>
      </view>
      <!--
			<view class="submit_the_module" @click="submit">
				<view>确认申请</view>
			</view> -->
      <view class="fixed-wapper">
        <view class="floor-tip">
          <view @click="checked = !checked">
            <u-icon
              :name="checked ? '/static/selected.png' : '/static/unselect.png'"
              size="35"
              style="margin-right: 10rpx; margin-top: 12rpx"
            ></u-icon>
          </view>
          <text>我已阅读并同意</text>
          <text v-if="type == 2" style="color: #fa453c" @click="routeTo('')"
            >《投资人加入聚商圈协议》</text
          >
          <text v-else style="color: #fa453c" @click="routeTo('')">《供应商加入聚商圈协议》</text>
        </view>
        <view @click="submit" class="submit-btn btn"> 提交资料 </view>
      </view>
    </view>
    <view class="apply-status1" v-else-if="applyStep == 1">
      <image class="img" :src="`${getImageUrl('join-sh.png')} `" mode=""></image>
      <p>资料审核中，预计需要1-3个工作日敬请耐心等待，谢谢！</p>
      <view class="show-apply" @click="showApplyModel = true">查看加入申请信息</view>
    </view>
    <view class="" v-else-if="applyStep == 3 || applyStep == 4">
      <view class="apply-view2">
        <view class="apply-view2-top">
          <view class="" style="font-size: 32rpx">
            加入费用：
            <text style="font-size: 30rpx; color: #10a28f">¥</text>
            <text style="font-size: 48rpx; color: #10a28f; font-weight: 600">1200</text>
          </view>
        </view>

        <view class="popup-box">
          <p style="margin-left: 20rpx">请选择支付方式</p>
          <view
            @click="payMethod = 'wxpay'"
            class="pay-method dis-flex flex-y-center flex-y-between"
          >
            <view class="pay-method-left">
              <u-image src="/static/wxzf.png" width="50rpx" height="50rpx"></u-image>
              <text style="margin-left: 28rpx">微信支付</text>
            </view>
            <u-icon
              v-if="payMethod == 'wxpay'"
              class="pay-method-right"
              name="/static/selected.png"
              size="36"
            ></u-icon>
          </view>
        </view>
        <view @click="paySubmit" class="submit-pay"> 立即支付 </view>
      </view>
    </view>
    <view class="apply-status1" v-else-if="applyStep == 100">
      <image class="img" :src="imgUrl + '/images/shz.png'" mode=""></image>
      <p>您已成功入驻！</p>
    </view>
    <u-picker
      @confirm="changeRanges"
      :range="Ranges"
      mode="selector"
      :params="params"
      range-key="name"
      v-model="showCalander"
    ></u-picker>
    <u-picker mode="region" @confirm="change" v-model="showArea"></u-picker>
    <u-toast ref="uToast" />

    <PayPopup :show="showPay" :payOrderId="payOrderId" :resStatus="resStatus">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        入驻缴费
      </p>
    </PayPopup>
    <u-popup
      v-model="showApplyModel"
      mode="bottom"
      width="750"
      height="600"
      :closeable="true"
      border-radius="20"
    >
      <view class="apply_box">
        <view class="apply-tl">申请信息</view>
        <view class="apply-info">
          <view>联系人：张安</view>
          <view> 联系方式：13680830842 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { BASE_URL, UP_URL } from '@/common/config'
import PayPopup from '@/components/PayPopup.vue'
// 倒计时时长(秒)
const times = 60
export default {
  components: {
    PayPopup
  },
  data() {
    return {
      // 倒计时
      times,
      type: 1,
      smsState: false,
      isLoading: false,
      checked: true,
      showPay: false,
      payOrderId: '',
      resStatus: 3,
      showCalander: false,
      showArea: false,
      show: '',
      showPopup: false,
      action: BASE_URL + UP_URL,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      payMethod: '',
      imgUrl: '',
      showApplyModel: false, //显示申请信息
      radioList: [
        {
          name: '商家入住',
          disabled: false,
          value: 1
        },
        {
          name: '厂家入驻',
          disabled: false,
          value: 2
        }
      ],
      // step1Desc: "真实信息",
      // step3Desc: "入驻业务",
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radioValue: '商家入驻',
      pickerMode: 'select',
      single: '',
      industryRanges: [],
      Ranges: [],
      params: {},
      area: '',
      pickId: '',
      applyStep: 3,
      step: 3,
      levelList: [
        {
          name: '云盟用户加入',
          id: 1
        },
        {
          name: '云盟商户加入',
          id: 2
        }
      ],
      numList: [
        {
          name: '身份信息'
        },
        {
          name: '平台审核'
        },
        {
          name: '缴纳费用'
        }
      ],
      show: false,
      //提交对象
      form: {
        level_id: 2,
        name: '',
        areaId: '',
        detailAddress: '',
        countyCode: '',
        latitude: 106.690801,
        longitude: 26.567322,
        introduction: '',
        type: 1,
        categoryName: '',
        categoryId: '',
        contactName: '',
        contactMobile: '',
        ownerEidNo: '',
        ownerEidBackUrl: '',
        ownerEidBackUrl: '',
        businessLicenseUrl: ''
      },
      labelStyle: {
        'font-size': '24rpx;'
      },
      title: '供应商加入聚商圈'
    }
  },
  onLoad(query) {
    this.imgUrl = BASE_URL
    if (query.type && query.type == 'touzi') {
      this.title = '成为聚商圈投资商'
      this.type = 2
    }
    this.$u.get('/app-api/shop/info/get-category-list?type=0&parentId=1').then((res) => {
      this.industryRanges = res.data
    })
  },
  onShow() {
    // this.$u.get("/app-api/shop/info/check").then(res => {
    // 	this.applyStep = res.data.step
    // 	if (res.data.step == 1) {
    // 		this.step = 1
    // 		this.step1Desc = "已提交"
    // 	} else if (res.data.step == 2) {
    // 		this.step = 0
    // 		this.step1Desc = "重新提交"
    // 		this.numList[1].name = "审核未通过"
    // 		this.$u.get("/app-api/shop/detail/my").then(res => {
    // 			this.form = res.data
    // 			this.fileList1.push({
    // 				url: res.data.logo
    // 			})
    // 			this.fileList2.push({
    // 				url: res.data.businessLicenseUrl
    // 			})
    // 		})
    // 	} else if (res.data.step == 3 || res.data.step == 4) {
    // 		this.step = 2
    // 		this.step1Desc = "已提交"
    // 		this.numList[1].name = "审核通过"
    // 	} else if (res.data.step == 5) {
    // 		this.step = 2
    // 		this.step3Desc = "入驻成功"
    // 	}
    // 	if (res.data.step == 3 || res.data.step == 4) {
    // 		this.step = 2
    // 		this.$u.get("/app-api/shop/enter-package/list").then(res => {
    // 			this.payList = res.data
    // 		})
    // 	}
    // })
  },
  methods: {
    // 点击发送短信验证码
    handelSmsCaptcha() {
      const app = this
      if (!app.isLoading && !app.smsState) {
        app.sendSmsCaptcha()
      }
    },
    // 请求发送短信验证码接口
    sendSmsCaptcha() {
      const app = this
      app.isLoading = true
      // 执行定时器
      app.timer()
      app.isLoading = false
    },
    // 执行定时器
    timer() {
      const app = this
      app.smsState = true
      const inter = setInterval(() => {
        app.times = app.times - 1
        if (app.times <= 0) {
          app.smsState = false
          app.times = times
          clearInterval(inter)
        }
      }, 1000)
    },
    //选择地址、修改编辑地址
    chooseAddressView(index) {
      uni.chooseLocation({
        success: (res) => {
          console.log('res', res)
          if (!res.name || !res.address || !res.latitude || !res.longitude) return
          // let addressObj = {
          // 	title: res.name,
          // 	address: res.address,
          // 	latitude: res.latitude,
          // 	longitude: res.longitude
          // }
          // console.log('addressObj', addressObj)
          this.form.latitude = res.latitude
          this.form.longitude = res.longitude
          this.form.countyCode = countyCode
          this.form.detailAddress = res.address
        }
      })
    },
    getLocationCode() {
      this.$u.api
        .getLocationCode({
          latitude: this.form.latitude,
          longitude: this.form.longitude
        })
        .then((res) => {
          this.area = res.province + '-' + res.city + '-' + res.county
          // this.form.detailAddress = res.formatted_address
        })
    },
    onPicker(e) {
      if (e == 0) {
        this.params = {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false
        }

        this.showCalander = true
        this.flag = e
        return
      } else if (e == 1) {
        this.showCalander = true
        this.Ranges = this.industryRanges
        this.flag = e
        return
      } else if (e < 4) {
        this.params = {
          year: false,
          month: false,
          day: false,
          hour: true,
          minute: true,
          second: false
        }
        this.showCalander = true
        this.flag = e
        return
      }
      this.flag = e
      this.showArea = true
    },
    change(e) {
      console.log(e)
      this.form.countyCode = e.area.value
      this.area = e.province.label + '-' + e.city.label + '-' + e.area.label
    },
    radioChange(e) {
      this.form.type = e
    },
    changeRanges(res) {
      // console.log(this.industryRanges[res]);
      this.form.categoryId = this.industryRanges[res].id
      this.form.categoryName = this.industryRanges[res].name
    },

    onPopup() {
      this.showPopup = true
    },
    //删除标签
    DeleteTheTag(index) {
      this.TagCollection.splice(index, 1)
    },
    //删除活动
    DeleteTheActivity(index) {
      this.SelectActivities.splice(index, 1)
    },
    // radioGroupChange(item) {
    // 	this.form.level_id = item.id
    // },

    submit() {
      this.$refs.uUpload1.lists.forEach((val) => {
        this.form.ownerEidFrontUrl = val.response.data
      })

      this.$refs.uUpload2.lists.forEach((val) => {
        this.form.ownerEidBackUrl = val.response.data
      })
      this.$refs.uUpload3.lists.forEach((val) => {
        this.form.businessLicenseUrl = val.response.data
      })

      if (this.form.type == '') {
        this.$u.toast('请选择入驻类型')
        return
      }

      if (this.form.name == '') {
        this.$u.toast('请输入商家名称')
        return
      }
      if (this.form.detailAddress == '') {
        this.$u.toast('请输入详细地址')
        return
      }
      if (this.area == '') {
        this.$u.toast('选择选择经营地址')
        return
      }

      if (this.form.contactName == '') {
        this.$u.toast('请输入联系人')
        return
      }
      if (this.form.contactMobile == '') {
        this.$u.toast('请输入联系手机号')
        return
      }

      if (this.form.businessLicenseUrl == '') {
        this.$u.toast('请上传营业执照')
        return
      }

      if (this.form.ownerEidFrontUrl == '' || this.form.ownerEidBackUrl == '') {
        this.$u.toast('请上传身份证照片')
        return
      }
      if (this.form.id) {
        this.$u.post('/app-api/shop/info/update', this.form).then((res) => {
          this.$u.toast('申请成功')
          setTimeout(() => {
            uni.switchTab(
              {
                url: '/pages/index/index'
              },
              800
            )
          })
        })
      } else {
        this.$u.post('/app-api/shop/info/create', this.form).then((res) => {
          this.$u.toast('申请成功')
          setTimeout(() => {
            uni.switchTab(
              {
                url: '/pages/index/index'
              },
              1500
            )
          })
        })
      }
    },

    paySubmit() {
      if (!this.pickId) {
        this.$u.toast('请选择入驻年限')
        return
      }

      this.$u
        .post('/app-api/shop/enter-apply/submit', {
          enterPackageId: this.pickId
        })
        .then((res) => {
          // #ifndef MP
          this.payOrderId = res.data.id
          this.showPay = true
          // #endif

          // #ifdef MP-WEIXIN
          this.$u
            .post('/app-api/pay/order/submit', {
              id: res.data.id,
              channelExtras: {
                openid: uni.getStorageSync('tokenInfo').openid
              },
              channelCode: 'wx_lite'
            })
            .then((res) => {
              let { appId, nonceStr, packageValue, paySign, signType, timeStamp } = JSON.parse(
                res.data.displayContent
              )
              uni.requestPayment({
                provider: 'wxpay',
                appId,
                nonceStr,
                package: packageValue,
                paySign,
                signType,
                timeStamp,
                success: (res) => {
                  uni.showToast({
                    title: '支付成功',
                    icon: 'none',
                    duration: 2000
                  })
                },
                fail: (err) => {
                  console.log(err)
                  uni.showToast({
                    title: '支付失败: ' + err,
                    icon: 'none',
                    duration: 2000
                  })
                }
              })
            })
          // #endif
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('@/style/btn.css');

.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333333;
  width: 100%;
}

.fixed-wapper {
  background-color: #fff;
  width: 100%;
  left: 0;
  padding-left: 4%;

  .submit-btn {
    width: 96%;
    // left: 4%;
  }
}

.text_right {
  ::v-deep input {
    text-align: right;
  }
}

input {
  font-size: 30rpx;
  color: #333333;
}

.must {
  color: red;
}

.cell-right {
  margin-right: 100rpx;
}

.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;

  view {
    width: 96%;
    border-radius: 40rpx;
    padding: 20rpx 0rpx;
    background-color: #0f76bc;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

u-switch {
  padding: 0 16rpx;
}

.label_containers {
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;

  .item {
    margin-top: 20rpx;
    position: relative;
    margin-left: 24rpx;
    padding: 10rpx 16rpx;
    border-radius: 30rpx;
    background-color: #ececec;
    color: #333333;
    font-size: 23rpx;
    line-height: 1;

    .close {
      padding: 4rpx;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      right: -16rpx;
      top: -10rpx;
    }
  }
}

.add_label_button {
  display: flex;
  justify-content: flex-end;

  view {
    font-size: 20rpx;
    border-radius: 20rpx;
    padding: 12rpx 16rpx;
    background-color: #f69c15;
    color: #f2f2f2;
    line-height: 1;
  }
}

.attachment_upload_button {
  padding: 16rpx 0;
  display: flex;

  .button_container {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
    background-color: #fa9e15;
    color: #f2f2f2;
  }
}

.from {
  .custom_modules {
    padding-left: 20rpx;
  }

  .work_title_module {
    margin-top: 16rpx;
  }
}

.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}

.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;

    text {
      color: #2d93fd;
    }
  }
}

.steps-tip {
  display: flex;
  justify-content: space-around;
  font-size: 20rpx;
}

.apply-status1 {
  margin-top: 220rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .show-apply {
    font-weight: 400;
    font-size: 30rpx;
    color: #10a28f;
    line-height: 60rpx;
    border-bottom: 1rpx solid #10a28f;
    // padding-bottom: 10rpx;
    margin-top: 20rpx;
  }

  .img {
    width: 550rpx;
    height: 300rpx;
  }

  p {
    width: 70%;
    text-align: center;
    font-size: 30rpx;
    color: #333333;
    line-height: 60rpx;
  }
}

.apply-view2-top {
  background-color: #fff;
  padding: 30rpx;
  font-size: 30rpx;
  color: #333333;
}

.price-box {
  margin-top: 30rpx;
}

.price-box-item {
  width: 200rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 10rpx;

  .item-top {
    font-size: 36rpx;
    font-weight: 600;
  }

  .item-top-floor {
    font-size: 30rpx;
  }
}

.ckecked {
  background: #10a28f;
  color: #fff;
}

.popup-box {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  font-size: 32rpx;
  margin-top: 20rpx;
}

.popup-price {
  font-size: 50rpx;
  font-weight: 600;
  padding: 20rpx;
  text-align: center;
}

.pay-method {
  overflow: auto;
  padding: 25rpx 20rpx;
  margin-top: 15rpx;
}

.pay-method-left {
  float: left;
  display: flex;
  align-items: center;
}

.pay-method-right {
  float: right;
}

.warning {
  padding: 20rpx;
  background-color: #f5e8e6;
  color: #f54831;
  font-size: 26rpx;
}

.submit-pay {
  width: 700rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background: #10a28f;
  border-radius: 65rpx;
  color: #ffffff;
  align-self: center;
  font-size: 35rpx;
  margin: 80rpx 0 0 20rpx;
}

.title {
  font-size: 30rpx;
  width: 200rpx;
}

.card {
  height: 360rpx;
  background: #ffffff;
  padding: 26rpx 32rpx;
}

.upload-group {
  width: 100%;
  margin-top: 28rpx;

  .slot-btn {
    // margin-top: 28rpx;
    position: relative;
    width: 330rpx;
    height: 240rpx;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    .des {
      text-align: center;

      .des-text {
        font-size: 24rpx;
        color: #10a28f;
      }
    }
  }
}

.radio-group {
  flex-wrap: wrap;

  .radio {
    // min-width: 30%;
    padding-right: 20rpx;
    box-sizing: border-box;

    .circle {
      width: 28rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 14rpx;
      border: 1px solid #b8b8b8;
      box-sizing: border-box;
    }

    .name {
      font-size: 30rpx;
      color: #333333;
      margin-left: 10rpx;
    }

    .checked {
      border: 1px solid #10a28f;
      position: relative;

      .xixi {
        width: 16rpx;
        height: 16rpx;
        background: #10a28f;
        border-radius: 8rpx;
        position: absolute;
        top: 5rpx;
        left: 5rpx;
        box-sizing: border-box;
      }
    }
  }
}

.activate {
  font-size: 30rpx;
  color: #10a28f;
}

.un-activate {
  font-size: 26rpx;
  color: #f54831;
}

.apply_box {
  padding: 98rpx 20rpx 43rpx 20rpx;

  .apply-tl {
    font-size: 30rpx;
    margin-bottom: 30rpx;
  }

  .apply-info {
    width: 710rpx;
    height: 400rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    padding: 20rpx 17rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 60rpx;
  }
}
</style>
